<template>
    <div style="height:100%;width:100%;" class="dataSearch">
        <bar class="bar" @on-back="$router.back()" title="IC卡流水信息"> </bar>
        <group class="dataSearch-block">
            <cellBox>
                <div><img src="../../../assets/logo1.png" style="vertical-align: middle;height:35px;margin-right:10px;" />油巴加油机管理平台</div>
            </cellBox>
        </group>
        <group>
        <form-preview header-label="变动金额（元）" :header-value="this.item.changeType === 1 ? '+' + this.item.changeAmount : '-' + this.item.changeAmount" :body-items="list">
        </form-preview>
        </group>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        lang
    } from 'muka'
    import {
        Bar
    } from 'muka-ui'
    import {
        Group,
        CellBox,
        FormPreview
    } from 'vux'
    export default {
        name: 'detailOnly',
        components: {
            Bar,
            Group,
            CellBox,
            FormPreview
        },
        created: function () {
            if(this.$route.query.type === 1)
            {
                this.item = this.cardFlowList[this.$route.params.index]
            }
            else
            {
                this.item = this.cardFlowListBy[this.$route.params.index]
            }

            this.list = [{
                label: '资金流水号',
                value: this.item.id
            }, {
                label: 'IC卡号',
                value: this.item.cardId
            }, {
                label: '用户姓名',
                value: this.item.userName
            }, {
                label: '联系电话',
                value: this.item.mobile
            }, {
                label: '消费类型',
                value: this.item.subject === 1 ? '加油消费' : '充值变动'
            }, {
                label: '变动资金',
                value: this.item.changeType === 1 ? '+' + this.item.changeAmount : '-' + this.item.changeAmount
            }, {
                label: '当前余额',
                value: this.item.balance
            }, {
                label: '单位信息',
                value: this.item.company
            }, {
                label: '变动动时间',
                value: this.item.createTime
            }]
        },
        data: function () {
            return {
                list: [],
                css: ['amount-add', 'amount-rm'],
                item: [],
            }
        },
        computed: mapState([
            VUEX_NAME.cardFlowList,
            VUEX_NAME.cardFlowListBy,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cCardFlowList,
                VUEX_NAME.cCardFlowListBy,
            ]),
        }
    }

</script>
<style>
    .amount-rm {
        color: red
    }

    .amount-add {
        color: #44b549
    }

</style>
